<template>
    <!-- 组件的UI结构部分 -->
    <h2>ToDoHeader</h2>
    <!-- <button @click="$emit('click')">触发</button> -->
    <div>count:{{ count }}</div>
    <div>doblueCount:{{ count * 2 }}</div>
    <div>doblueCount:{{ doubleCount }}</div>
    <button @click="count++">count++</button>
    <button @click="handler">count++</button>
</template>
<script setup>

// 下面是Vue3框架独有范式：组合式
import { ref, computed, onMounted, watch } from 'vue'

let count = ref(1)

watch(count, (newV, oldV) => {
    // console.log('count变化了：', newV, oldV)
})
const handler = () => {
    count.value++
}
const doubleCount = computed(() => {
    return count.value * 2
})

</script>
<style>
h2 {
    color: red;
}
</style>